<template>
	<div class="video-details">
		<div class="crumb-cont">
			<div class="crumb">
				<i class="breadcrumb-icon"></i>
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/">视频学习</a></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<div class="video">
			<div class="video-cont">
				<div class="video-title">
					<div class="video-name">
						<i class="video-play"></i>
						<span>{{info.chapterName}}({{getTime(info.lessonTime)}})</span>
					</div>
					<el-button size="mini" type="warning" icon="el-icon-back" @click="back">返回</el-button>

					<!-- <div class="back" @click="back">返回</div> -->
				</div>
				<div class="video-content">
					<div class="video">
						<!-- <video src="../assets/1.mp4" ref="video" @play="videoplay" @pause="videoplay" controls></video> -->
						<video :src="info.videoUrl" ref="video" @play="videoplay" @pause="videoplay" controls></video>
					</div>
					<div class="video-intro">
						<div class="video-author">
							<div class="author-avatar">
								<img v-if="author.avatar" :src="author.avatar" alt="" />
								<img v-else src="../assets/img/avanar.jpeg" alt="" />
							</div>
							<div class="author-intro">
								<div class="author-name">{{author.teacherName}}</div>
								<div class="author-item">{{author.teacherTitle}}</div>
							</div>
						</div>
						<div class="video-intro">
							{{author.summary}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="video-types">
			<div class="typs-cont">
				<!-- <div class="intro-type types-active">问答</div> -->
				<div class="intro-type types-active">评论</div>
			</div>
		</div>
		<div class="details">
			<div class="comment-cont">
				<div class="comment-types">
					<!-- 	<div class="comment-type comment-active">全部</div>
					<div class="comment-type">精华</div> -->
					<div class="input-btn">
						<el-button type="primary" size="mini" round icon="el-icon-edit"
							@click="showInput=!showInput">我要发布</el-button>
					</div>
				</div>
				<div class="comment-input" :style="{'height': showInput ? '140px': '0'}">
					<el-input type="textarea" placeholder="请输入内容" v-model="replyText">
					</el-input>
					<el-rate v-model="star"></el-rate>
					<el-button type="primary" size="mini" round @click="reply">发布</el-button>
				</div>
				<div class="comment-list" v-if="commentList.length!=0">
					<div class="comment-item" v-for="item in commentList">
						<div class="comment-title">
							<div class="title-left">
								<div class="comment-avatar">
									<img :src="item.userAvatar" alt="" />
								</div>
								<div class="comment-name">{{item.userNickName}}</div>
							</div>
							<!-- <div class="title-right">
								<span>0 回答</span>
								<span>23 浏览</span>
							</div> -->
						</div>
						<div class="comment">{{item.content}}</div>
						<div class="comment-option">
							<div class="option-left">
								<el-rate disabled v-model="item.starNum"></el-rate>
								<!-- <div class="option-btn">我来回答</div>
								<div class="btn-intro">+2积分</div> -->
							</div>
							<div class="comment-time">{{item.pubDate}}</div>
						</div>
					</div>
				</div>
				<div class="comment-list" v-else>
					<el-empty description="暂无课程评论"></el-empty>
				</div>
			</div>
			<div class="recommend-list">
				<div class="recommend-title">推荐课程</div>
				<div class="recommend-item" @click="goTopLesson(item)" v-for="item in topLesson">
					<div class="recommend-img">
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
						<!-- <img :src="item.logoUrl" alt="" /> -->
					</div>
					<div class="recommend-intro">
						<div class="item-title">{{item.lessonName}}</div>
						<div class="item-intro">
							<span>{{item.categoryName}}</span>
							<span>{{item.difficulty}}</span>
							<span>
								<i class="el-icon-user-solid"></i>
								{{item.articleHit}}
							</span>
							<el-rate disabled-void-color="#ccc" disabled :value="item.commentNum
				"></el-rate>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getChapterInfoApi,
		getLessonDetailsApi,
		upVideoDateApi,
		addLessinCommont,
		getChapterCommentApi,
		getTopLessonApi,
		getLessnScheduleApi
	} from '@/api/Lesson'
	export default {
		data() {
			return {
				id: this.$route.query.chapterId,
				lessonId: this.$route.query.lessonId,
				info: {},
				author: {},
				showInput: false,
				replyText: '',
				star: 0,
				commentList: [],
				commentPageSize: 10,
				commentPageNum: 1,
				topLesson: [],
				currentTime: 0
			}
		},
		created() {
			this.getVideoInfo()
			this.getChapterInfo()
			this.getCommonList()
			this.getTopLesson()
			this.getLessnSchedule()
		},
		methods: {
			getLessnSchedule() {
				getLessnScheduleApi({
					lessonChapterId: this.id
				}).then(res => {
					this.currentTime = res.msg
					this.$refs.video.currentTime = res.msg
				})
			},
			goTopLesson(item) {
				this.$router.push({
					path: '/VideoIntro',
					query: {
						lessonId: item.lessonId
					}
				})
			},
			getTopLesson() {
				getTopLessonApi().then(res => {
					this.topLesson = res.data
				})
			},
			getCommonList() {
				getChapterCommentApi({
					chapterId: this.id,
					pageSize: this.commentPageSize,
					pageNum: this.commentPageNum
				}).then(res => {
					if (res.code == 200) {
						this.commentList = JSON.parse(JSON.stringify(res.rows))
					}
				})
			},
			videoplay() {
				let time = this.$refs.video.currentTime
				time = Math.round(time)
				upVideoDateApi({
					lessonChapterId: this.id,
					schedule: time
				}).then(res => {

				})
				this.$refs.video.currentTime = this.currentTime
			},
			getVideoInfo() {
				getLessonDetailsApi({
					lessonId: this.lessonId
				}).then(res => {
					this.lessonIntro = res.data
					this.author = res.data.teacherResponse
				})
			},
			getChapterInfo() {
				getChapterInfoApi({
					chapterId: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			reply() {
				if (!this.replyText) {
					this.$message.error('请输入要回复的内容')
					return false
				}
				addLessinCommont({
					"commentLessonChapterId": this.id,
					"content": this.replyText,
					"starNum": this.star
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '回复成功',
							type: 'success'
						})
						this.replyText = ''
						this.star = 0
						this.getCommonList()
					}
				})
			},
			getTime(time) {
				var secondTime = parseInt(time); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) {
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取余，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取余的分，获取分钟除以60取余的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				let str = ''
				str += hourTime ? hourTime + '小时' : ''
				str += minuteTime ? minuteTime + '分钟' : ''
				str += secondTime ? secondTime + '秒' : ''
				return str
			},
			back() {
				this.$router.back()
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.video-details {
		background-color: #F7F7F7;

		.crumb-cont {
			width: 100%;
			background-color: #fff;
		}

		.crumb {
			display: flex;
			align-items: center;
			height: 42px;
			width: @contWidth;
			margin: 0 auto;
		}

		.breadcrumb-icon {
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background: url(../assets/img/crumb_icon.png);
			background-size: 100% 100%;
		}

		.is-link {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333;
		}



		.video {
			background-color: #000;
		}

		.video-cont {
			width: @contWidth;
			margin: 0 auto;
		}

		.video-title {
			height: 51px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.video-name {
			display: flex;
			align-items: center;
		}

		.video-content {
			display: flex;

			.video {
				width: 914px;
				height: 536px;

				// background-color: #999;
				video {
					width: 100%;
					height: 100%
				}
			}


			.video-intro {
				flex: 1;
				background-color: #222222;
				padding: 26px;
			}
		}

		.video-author {
			display: flex;
			align-items: center;
		}

		.author-intro {
			margin-right: 120px;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18px;
		}

		.author-name {
			font-size: 16px;
			margin-bottom: 6px;
		}

		.author-avatar {
			width: 42px;
			height: 42px;
			border-radius: 42px;
			overflow: hidden;
			margin-right: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
		}

		.video-intro {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 18px;
		}

		.video-play {
			display: block;
			width: 16px;
			height: 16px;
			margin-right: 10px;
			background: url(../assets/img/video_play_icon.png);
			background-size: 100% 100%;
		}

		.video-types {
			background-color: #fff;
		}

		.typs-cont {
			width: @contWidth;
			height: 77px;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}

		.intro-type {
			position: relative;
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			margin-right: 126px;
		}

		.types-active {
			color: #2360FE;

			&::before {
				display: block;
				content: "";
				position: absolute;
				bottom: -12px;
				left: 50%;
				transform: translateX(-50%);
				width: 21px;
				height: 4px;
				background: #2360FE;
			}
		}

		.details {
			width: @contWidth;
			margin: 0 auto;
			display: flex;
		}

		.comment-cont {
			flex: 1;
		}

		.comment-types {
			display: flex;
			align-items: center;
			padding-top: 10px;
			height: 85px;
			position: relative;
		}

		.input-btn {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);

			.el-button {
				width: 112px;
				height: 34px;
				background: #0091FF;
				border-radius: 17px;
				line-height: 34px;
				padding: 0;
			}
		}

		.comment-input {
			overflow: hidden;
			transition: all 0.5s;
			// padding: 10px 0;
			position: relative;

			.el-textarea {
				height: calc(100% - 44px);
				margin-bottom: 10px;
			}

			.el-textarea__inner {
				height: 100%;
				padding: 10px;
			}

			.el-button {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		}

		.comment-list {
			.el-empty {
				background-color: #fff;
			}
		}

		.comment-type {
			margin-right: 25px;
			padding: 7px 14px;
			border-radius: 34px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.comment-active {
			background-color: #2360FE;
			color: #fff;
			cursor: pointer;
		}

		.comment-item {
			background: #FFFFFF;
			margin-bottom: 16px;
			padding: 20px 26px;
		}

		.comment-title,
		.title-left {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.comment-avatar {
			width: 42px;
			height: 42px;
			border-radius: 42px;
			overflow: hidden;
			margin-right: 15px;
		}

		.comment-name {
			font-size: 16px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
		}

		.title-right {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;

			span {
				margin-left: 24px;
			}
		}

		.comment {
			padding: 10px 20px 30px 57px;
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.comment-option {
			padding-left: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.option-left {
			display: flex;

			align-items: center;
		}

		.option-btn {
			width: 89px;
			height: 34px;
			background: #0091FF;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-right: 10px;
		}

		.comment-time {
			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.btn-intro {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #F7B500;
		}

		.recommend-list {
			width: 300px;
			margin-left: 20px;
		}

		.recommend-title {
			padding: 16px 0 11px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.recommend-item {
			display: flex;
			align-items: center;
			margin-bottom: 16px;
		}

		.recommend-img {
			width: 93px;
			height: 67px;
			border-radius: 8px;
			overflow: hidden;
			margin-right: 11px;
		}

		.recommend-intro {
			flex: 1;
			height: 67px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.item-title {
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
		}

		.item-intro {
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;

			span {
				margin-right: 4px;
			}

			.el-rate {
				margin-left: 10px;
			}

			.el-icon-user-solid {
				margin-right: 6px;
			}

			.el-rate__item {
				margin: 0;

			}

			.el-rate__icon {
				margin: 0;
				font-size: 14px;
				line-height: 20px;
			}
		}
	}
</style>